<script setup>
defineProps({
  title: {
    type: String,
    default: '',
    required: true,
  },
  confirmBtnText: {
    type: String,
    default: '确定',
  },
  cancelBtnText: {
    type: String,
    default: '取消',
  },
  options: {
    type: Object,
    default: () => ({
      showFooter: true,
      showCancelBtn: true,
      showConfirmBtn: true,
    }),
  },
  width: {
    type: String || Number,
    default: '30%',
  },
  btnDisabled: {
    type: Boolean,
    default: false,
  },
  showConfirmBtn:{
    type: Boolean,
    default: true,
  },
  isFullScreen: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['close', 'confirm'])
const visible = defineModel('visible', {
  default: false,
  type: Boolean,
  required: true,
})
const modalRef = ref(null)
const fullScreen = ref(false)
function handleCancel(done) {
  fullScreen.value = false
  emit('close')
}

function handleSave() {
  emit('confirm')
}
</script>

<template>
  <el-dialog
    v-bind="$attrs"
    ref="modalRef"
    v-model="visible"
    :title="title"
    :width="width"
    :before-close="handleCancel"
    class="base-dialog"
    draggable
    :close-on-click-modal="false"
    :fullscreen="fullScreen"
  >
    <template #header>
      <div class="flex justify-between relative  custom-header" v-if="title !== '' ">
        <div class="text-xl font-300">
          {{ title }}
        </div>
        <svg-icon :name="fullScreen ? 'ri:fullscreen-exit-line' : 'ri:fullscreen-line'" class="text-base cursor-pointer top-[5px] right-[5px]"  @click.stop="fullScreen = !fullScreen" v-if="isFullScreen"/>
      </div>
    </template>
    <slot />
    <template v-if="options.showFooter" #footer>
      <div class="dialog-footer text-center">
        <el-button text bg @click="handleCancel">
          <!--          <template #icon> -->
          <!--            <SvgIcon name="material-symbols:cancel-outline" type="iconify" /> -->
          <!--          </template> -->
          {{cancelBtnText}}
        </el-button>
        <slot name="footer" />
        <el-button v-if="showConfirmBtn" type="primary" :disabled="btnDisabled" @click="handleSave">
          <!--          <template #icon> -->
          <!--            <SvgIcon name="material-symbols:check-circle-outline" type="iconify" /> -->
          <!--          </template> -->
          {{confirmBtnText}}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
:deep(.el-overlay){
  backdrop-filter: blur(10px);
}
.base-dialog{
  border-radius: var(--el-border-radius-base);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .el-dialog__header{
    margin:calc(-1 * var(--el-dialog-padding-primary));
    margin-bottom: 0px;
    .el-dialog__headerbtn{
      height: 47px;
      border-top-right-radius: var(--el-border-radius-base);
    }
  }
  .el-dialog__body{
    max-height: calc(100vh - 220px);
    overflow: auto;
    margin-right: -16px;
    padding-right: var(--el-dialog-padding-primary);
  }
  .el-dialog__footer{
    margin: 0 -15px;
    margin-bottom: -20px;
    padding-bottom: 15px;
    border-top: 1px solid var(--el-border-color-extra-light);
  }
  :deep(.el-overlay) {
    background-color: transparent;
    pointer-events: none;
  }
  :deep(.el-dialog) {
    pointer-events: auto;
  }
}
.custom-header {
  color: var(--el-color-primary);
  padding: 10px 10px 10px 20px;
  font-size: 16px;
  font-weight: bold;
  height: 47px;
  position: relative;
  border-radius: var(--el-border-radius-base) 5px 0 0;

  &::before {
    content: "";
    position: absolute;
    /* bottom: 0; */
    left: 0;
    width: 5px;
    height: 25px;
    background: var(--el-color-primary);
    border-top-right-radius: var(--el-border-radius-small);
    border-bottom-right-radius: var(--el-border-radius-small);
    transition: all 0.3s ease-in-out;
  }
}
</style>
